<template>
  <div class="member">
    <index-nav></index-nav>
    <!-- 头部 开始 -->
    <div class="bj">
      <div>
        <p class="title">swim</p>
        <p class="page">首月立减10元！</p>
      </div>
      <router-link to="/opening" class="open">立即开通</router-link>
    </div>
    <!-- 头部 结束 -->
    <!-- 广告图 开始 -->
    <div class="plan">
      <h3>适合你的计划</h3>
      <a href="javascript:;" class="more">查看更多</a>
    </div>
    <div class="photo">
      <img src="../assets/member/b1.jpg" alt="" />
    </div>
    <!-- 广告图 结束 -->
    <!-- 福利社 开始 -->
    <div class="plan">
      <h3>会员福利社</h3>
      <router-link to="/membermore" class="more">查看更多</router-link>
    </div>
    <div class="big">
      <div class="coupon" v-for="(item, i) in members.slice(0,4)" :key="i">
          <img :src="require(`../assets/member/${item.src}`)" />
          <div class="topic">{{ item.title }}</div>
      </div>
    </div>
    <!-- 福利社 结束 -->
    <!-- 特权 开始 -->
    <div class="plan">
      <h3>会员特权</h3>
    </div>
    <div class="privilege">
      <div class="gift">
        <div>
          <img src="../assets/member/t1.png" />
        </div>
        <div class="pic">会员福利社</div>
      </div>
      <div class="gift">
        <div>
          <img src="../assets/member/t2.png" />
        </div>
        <div class="pic">商城优惠</div>
      </div>
      <div class="gift">
        <div>
          <img src="../assets/member/t3.png" />
        </div>
        <div class="pic">训练计划</div>
      </div>
      <div class="gift">
        <div>
          <img src="../assets/member/t4.png" />
        </div>
        <div class="pic">身份标识</div>
      </div>
    </div>
    <!-- 特权 结束 -->
    <tabbar></tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      members:[]
    };
    
  },
  methods: {

    /** 通过mid与title，查询标题，通过回调方法返回结果  
     * mid: 类别id
     * title: 标题
     * callback：回调方法，当拿到响应结果后立即调用，将传入刚查到的文章列表数据
     */
    // loadMember(mid,title, callback){
    //   this.$indicator.open('加载中...');
    //   this.axios.get(`/member?mid=${mid}`).then(result=>{
    //     let articles = result.data.results;
    //     // 处理图片
    //     articles.forEach(item=>{
    //       if(item.image){
    //         item.image = require(`../assets/${item.image}`)
    //       }
    //     })
    //     // 立即调用callback，执行后续任务
    //     callback(articles);
    //     this.$indicator.close();
    //   })
    // },
    loadMember() {
      this.axios.get(`/members`).then((result) => {
        this.members = result.data.data;
        // 一开始判断每一个商品的选中状态，是否选中全选按钮
      });
    },
  },
mounted() {
    this.loadMember();
  },
}
</script>

<style>
.a{
  color: #333;
}
/* 头部 */
.member {
  width: 100%;
  background-color: #fcfcfc;
  display: inline-block;
  padding-bottom: 100px;
}
.member .bj {
  background-image: linear-gradient(rgba(245, 228, 204, 0.5), white);
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 60px;
}
.member .bj .title {
  font-size: 24px;
  color: rgb(221, 172, 98);
  text-align: left;
  line-height: 30px;
}
.member .bj .page {
  line-height: 30px;
  font-size: 12px;
  color: #999;
}
.member .bj .open {
  width: 100px;
  height: 34px;
  border-radius: 50px;
  background-image: linear-gradient(
    240deg,
    rgba(248, 176, 43),
    rgba(249, 204, 121)
  );
  text-align: center;
  border: none;
  display: block;
  color: #333;
  font-size: 14px;
  line-height: 34px;
  margin-top: 10px;
}
/* 广告图 */
.member .plan {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.member .plan h3 {
  text-align: left;
  padding-left: 20px;
}
.member .plan .more {
  display: block;
  width: 60px;
  height: 20px;
  line-height: 20px;
  color: #333;
  border-radius: 50px;
  background-color: white;
  padding: 3px 10px;
  margin-right: 20px;
  border: 1px solid#999;
}
.member .photo {
  margin: 0 auto;
  width: 90%;
}
.member .photo img {
  height: 200px;
  width: 100%;
  border-radius: 10px;
}
.member .big {
  margin: 0 auto;
  width: 90%;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}
/* 福利 */
.member .coupon {
  width: 48%;
  height: 155px;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 15px;
  padding-bottom: 10px;
  box-shadow: 0 5px 5px #ddd;
}
.member .coupon img {
  width: 100%;
  border-radius: 10px;
}
.member .coupon .topic {
  font-size: 14px;
  text-align: center;
  line-height: 32px;
}
/* 特权 */
.member .privilege {
  margin: 0 auto;
  width: 90%;
  display: flex;
  justify-content: space-around;
}
.member .privilege > .gift > :first-child {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff1da;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.member .privilege > .gift > div > img {
  width: 80%;
}
.member .privilege .gift .pic {
  font-size: 12px;
  text-align: center;
}
</style>>

